[WebTech #59] CSS > 3. CSS 語法 > 3-1 選擇器（Selector）
之前的文章，已經討論過「何謂 CSS」、「如何套用一個寫好的 CSS 檔至 HTML 中」等主題，所以這篇我們集中心力，來討論 CSS 最核心的一樣東西：「選擇器（Selector）」。
先定義何謂「選擇器」。其實這個中文翻譯我不是很喜歡，但是所有書籍都這麼稱呼它了，我只好從善如流。CSS 檔內是由一條一條的「規則」所組成的，外觀長得像這樣：
a {
color:red;
}
這告訴 HTML，碰到標示為 ... 之間的文字，就把它的顏色變成「紅色」。而這每條「規則」，就稱為一條「選擇器（Selector）」。也就是說， a { ... } 這條規則，會去自動匹配是否有名為 的 HTML 標籤，如果有，就套用 a { ... } 這條規則內的設定。英文原意是「a { ... } 會主動出擊『選擇』（Select）它想套用的對象 ，故命名為『選擇者』（Selector）」，而中文就翻譯為「選擇器」。其實我個人認為不要翻譯直接用原文，或另外取名（如：匹配規則，「匹配」也有點「Select」的味道在內）比較好。我重「字義」>「字形」，所以以後我都以「匹配規則」，來稱呼「Selector」（不習慣者請見諒喔）。
由於 CSS 的主體就是由這一大堆的 Selector 構成，所以想學 CSS，非得學會構成 Selector 的語法不可！剛剛示範的，是最簡單的一種匹配規則。其實 CSS 有相當複雜的「匹配規則文法」。下面這篇文章挑出常用的 30 種，建議想學 CSS 的朋友，一定得先學會這 30 種匹配規則的文法，將來撰寫 CSS 檔時，才能得心應手。
原文連結如下：
http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/
Search